/**
 * 圣诞树
 * animation: name duration timing-function delay iteration-count direction;
 */

.tree {
    width: 2.71rem;
    height: 4.24rem;
    z-index: 15;
    position: absolute;
    bottom: 0;
    left: 1rem;
    background-image: url(images/a/trees.png);
    background-size: 200% 100%;
    -webkit-animation: treeAnim 1s step(2) infinite;
    -moz-animation: treeAnim 1s step(2) infinite;
}

@-webkit-keyframes treeAnim {
    0% {
        background-position: 0% 100%;
    }
    100% {
        background-position: -200% 100%;
    }
}

@-moz-keyframes treeAnim {
    0% {
        background-position: 0% 100%;
    }
    100% {
        background-position: -200% 100%;
    }
}
/*月亮*/

.moon {
    background: #FCF0BC;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    box-shadow: 0 0 1.5rem #FCF0BC;
    position: absolute;
    left: 3.3rem;
    top: .8rem;
    -webkit-animation: nucleus 2s infinite linear;
    -moz-animation: nucleus 2s infinite linear;
}
/**
 * 光晕效果
 */

@-webkit-keyframes nucleus {
    0% {
        box-shadow: 0 0 0 transparent;
    }
    50% {
        box-shadow: 0 0 1rem #FCF0BC;
    }
    100% {
        box-shadow: 0 0 0 transparent;
    }
}

@-moz-keyframes nucleus {
    0% {
        box-shadow: 0 0 0 transparent;
    }
    50% {
        box-shadow: 0 0 1rem #FCF0BC;
    }
    100% {
        box-shadow: 0 0 0 transparent;
    }
}


/*云*/
.cloudy {
    background: #60768D;
    border-radius: 50%;
    box-shadow: #60768D 1.2rem -0.2rem 0 -0.1rem, #60768D 0.5rem -0.5rem, #60768D 0.8rem 0.2rem,#60768D 1.5rem 0.2rem 0 -0.2rem;
    height: 1rem;
    width: 1rem;
    position: absolute;
    left: .5rem;
    top: 1.8rem;
    z-index: 5;
    -webkit-animation: cloudy 5s ease-in-out infinite;
    -moz-animation: cloudy 5s ease-in-out infinite;
}
@-webkit-keyframes cloudy {
    50% {
        -webkit-transform: translateY(-0.1rem);
    }
}
@-moz-keyframes cloudy {
    50% {
        -moz-transform: translateY(-0.1rem);
    }
}

/**
 * 圣诞男孩
 */

.chs-boy {
    width           : 5rem;
    height          : 1.5rem;
    position        : absolute;
    z-index         : 3;
    top             : .1rem;
    right           : -3rem;
    transform       : scale(0.1);
    background      : url(images/a/boy-sleigh-car.png) -300% -100%;
    background-size : 400% 100%;
}

/**
 * 男孩走路动作
 */

.chs-boy-deer {
    -webkit-animation:chsBoyDeer 0.75s steps(3,end) infinite;
    -moz-animation:chsBoyDeer 0.75s steps(3,end) infinite;
}

@-webkit-keyframes chsBoyDeer {
    0% {
        background-position: -0% 100%;
    }
    100% {
        background-position: -300% 100%;
    }
}
@-moz-keyframes chsBoyDeer {
    0% {
        background-position: -0% 100%;
    }
    100% {
        background-position: -300% 100%;
    }
}


/**
 * 人物停止
 */

.boy-stop-animate {
    -webkit-animation-play-state: paused;
}

/**
 * 窗户
 */

.window {
    width: 2.6rem;
    height: 1.5rem;
    position: absolute;
    left: 9.7rem;
    top: 6.2rem;
    cursor: pointer;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
}

.window-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    width: 91%;
    margin: 0 auto;
    height: 100%;
    overflow: hidden;
}


/**
 * 窗户背景
 */

.window-bg {
    width: 86%;
    height: 92%;
    position: absolute;
    left: 50%;
    margin-left: -43%;
    bottom: 0;
    background: url(images/a/page-a-window-bg.png);
    background-size: 100% 100%;
    z-index: -1;
}


/**
 * 窗户底边
 * @type {[type]}
 */

.window:before {
    content: "";
    background: url(images/a/window-bottom.png);
    width: 100%;
    height: 0.17rem;
    display: block;
    position: absolute;
    bottom: 0.05rem;
    background-size: 100% 100%;
    z-index: 100;
}


/**
 * 底边阴影
 * @type {[type]}
 */

.window:after {
    content: "";
    background: url(images/a/window-bottom-shadow.png);
    width: 100%;
    height: 0.09rem;
    display: block;
    position: absolute;
    bottom: 0;
    background-size: 100% 100%;
    z-index: 100;
}

.wood {
    display: block;
    overflow: hidden;
}


/**
 * 左侧门
 */

.window-left {
    float: left;
    background: url(images/a/window-left.png);
    -webkit-border-top-left-radius: 0.1rem;
    -moz-border-top-left-radius: 0.1rem;
}


/**
 * 右侧门
 */

.window-right {
    float: right;
    background: url(images/a/window-right.png);
    -webkit-border-top-right-radius: 0.1rem;
    -moz-border-top-left-radius: 0.1rem;
}

.window-left,
.window-right {
    width: 1.17rem;
    height: 1.3rem;
    z-index: 110;
    box-shadow: 0 0 0.15rem #FCF0BC;
    background-size: 100% 100%;
}

.window-animation {
    -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
}


/**
 * 动画过程
 */

.window-transition {
    -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
}

.window-left.hover {
    -webkit-transform: scale(0.95) rotateY(60deg);
    -moz-transform: scale(0.95) rotateY(60deg);
    margin-top: 0.1rem;
    margin-left: -0.25rem;
}

.window-right.hover {
    -webkit-transform: scale(0.95) rotateY(-60deg);
    -moz-transform: scale(0.95) rotateY(-60deg);
    margin-top: 0.1rem;
    margin-right: -0.25rem;
}